import React, { useEffect, useState } from "react";
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  PropertySafetyOutlined,
  TransactionOutlined,
  UserAddOutlined,
} from "@ant-design/icons";
import { Avatar, Image, Tooltip, Divider, Button, Select } from "antd";
import { withRouter } from "react-router-dom";
import Avatarlogo from "../../data/aver.jpg";
import { useTranslation } from "react-i18next";
import style from "./navigationavatar.module.scss";
const { Option } = Select;

function NavigationAvatar(props) {
  const { i18n, t } = useTranslation();
  const { history } = props;
  const [uesrname, setUsername] = useState("广州酒家潮州分店");

  const data = localStorage.getItem("i18nextLng");

  // 卡片内容函数
  const showNavigationDom = () => {
    return (
      <div className={style.navigationcard}>
        <div className={style.navigationuser}>
          <Avatar
            style={{ height: "44px", width: "44px" }}
            src={
              <Image
                src={Avatarlogo}
                style={{ width: "44px" }}
                preview={false}
              />
            }
          />
          <p className={style.navigationusername}>
            {t("login.username")}: {uesrname}
          </p>
        </div>
        <div className={style.navigationtime}>
          {/* <span>上次登陆时间: 2022-08-29 18:00:00</span> */}
          <span>{t("login.Lastlogintime")}: 2022-08-29 18:00:00</span>
        </div>
        <div style={{ width: "232px" }}>
          <Divider style={{ margin: "0px" }} />
        </div>
        <div className={style.navigationselect}>
          <p>
            <span>
              <HomeOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/homepage",
                });
              }}
            >
              {/* 首页 */}
              {t("layout.homePage")}
            </Button>
          </p>
          <p>
            <span>
              <UserOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/account/mine",
                });
              }}
            >
              {/* 我的账户 */}
              {t("layout.MyAccount")}
            </Button>
          </p>
          <p>
            <span>
              <PropertySafetyOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/tradingcenter/applyresult",
                });
              }}
            >
              {/* 交易中心 */}
              {t("layout.TradingCenter")}
            </Button>
          </p>
          <p>
            <span>
              <TransactionOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/tradingcenter/applyresult",
                });
              }}
            >
              {/* 全球付款 */}
              {t("layout.GlobalPayment")}
            </Button>
          </p>
          <p>
            <span>
              <UserAddOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/beneficiary/info",
                });
              }}
            >
              {t("layout.Beneficiary")}
              {/* 受益人 */}
            </Button>
          </p>
          <p>
            <span>
              <SettingOutlined />
            </span>
            <Button
              type="link"
              onClick={() => {
                history.push({
                  pathname: "/gcps-cusweb/setup/account",
                });
              }}
            >
              {/* 我的设置 */}
              {t("layout.SetUp")}
            </Button>
          </p>
        </div>
        <div style={{ width: "232px" }}>
          <Divider style={{ margin: "0px" }} />
        </div>
        <div className={style.navigationbottom}>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: "/login",
              });
            }}
          >
            {/*退出登录 */}
            {t("login.Logout")}
          </Button>
        </div>
      </div>
    );
  };

  const MenuOnClick = (value) => {
    console.log("MenuOnClick", value);
    i18n.changeLanguage(value.key);
  };

  return (
    <div className={style.navigationboss}>
      <span style={{ marginRight: "20px", paddingTop: "6px" }}>
        <Select
          labelInValue
          style={{ width: 100 }}
          defaultValue={data}
          onChange={MenuOnClick}
        >
          <Option value="zh">简体中文</Option>
          <Option value="hk">繁体中文</Option>
          <Option value="en">English</Option>
        </Select>
      </span>
      <Tooltip placement="bottomLeft" color="#fff" title={showNavigationDom()}>
        <Avatar
          style={{ height: "40px", width: "40px" }}
          src={
            <Image
              src={Avatarlogo}
              style={{ width: "40px", height: "40px" }}
              preview={false}
            />
          }
        />
      </Tooltip>
    </div>
  );
}
NavigationAvatar = withRouter(NavigationAvatar);
export default NavigationAvatar;
